import { Component } from 'react';

import CustomList from './CustomList.js';
import CustomInput from './CustomInput.js';
import CountDown from './CountDown.js';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      flag: true,
      list: [
      ]
    }

  }

  componentDidMount() {
    console.log('App componentDidMount');
  }

  componentDidUpdate() {
    console.log('App componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('App componentWillUnmount');
  }

  addTodo = (value) => {
    let list = this.state.list;
    list.push({
      id: list.length + 1,
      name: value,
      finished: false
    })
    this.setState({
      list
    })
  }
  delTodo = (id) => {
    let list = this.state.list;
    this.setState({
      list: list.filter(el => el.id !== id)
    })
  }
  render() {

    return (
      <div>
        <button onClick={() => {this.setState({flag: !this.state.flag})}}>切换</button>
        {!this.state.flag && <div>
          <header className="header">TodoList React</header>
          <CustomInput addTodo={this.addTodo}></CustomInput>
          <CustomList list={this.state.list} delTodo={this.delTodo}></CustomList>
        </div>}
        
        {this.state.flag && <CountDown></CountDown>}
      </div>
    )
  }
}

export default App;